import React from "react"
import { sleep } from 'antd-mobile/es/utils/sleep'
import styles from '@/assets/css/guest.module.css'


export default () => {

    let [search, SetSearch] = useState(false)  // 搜索框显示隐藏

    let [keyword, SetKeyword] = useState('')  // 搜索关键词

    let [page, SetPage] = useState(1)
    let [hasMore, SethasMore] = useState(false)
    let [list, SetList] = useState([])

    // 添加表格
    let [addShow, SetAddShow] = useState(false)
    const [addForm] = React.UI.Form.useForm()

    // 编辑表格
    let [editShow, SetEditShow] = useState(false)
    const [editForm] = React.UI.Form.useForm()
    let [gid, SetGid] = useState(0)

    // 右侧滑动删除按钮
    const RightBtn = [
        {
            key: 'delete',
            text: '删除住客',
            color: 'danger'
        }
    ]

    React.useEffect(() => {
        GetGuestData()
    }, [])

    const GetGuestData = async () => {
        let params = {
            busid: React.business.id,
            keyword,
            page
        }

        let result = await React.request.post('/guest/GuestIndex', params)

        if(result.code == 0)
        {
            SethasMore(false)
            return false
        } else
        {
            SethasMore(true)
            SetPage(page + 1)
            SetList(list.concat(result.data))
        }
    }

    // 下拉刷新
    const OnRefresh = async () => {
        SetList([])
        SetPage(1)
        SethasMore(true)

        await sleep(800)
        GetGuestData()
    }

    // 上拉加载
    const LoadMore = async () => {
        await sleep(800)
        GetGuestData()
    }

    // 取消搜索
    const ResetSearch = () => {
        SetSearch(false)
        if(keyword != '')
        {
            SetKeyword('')
            OnRefresh()
        }
    }

    // 添加住客
    const AddGuest = async (values: any) => {
        SetAddShow(false)

        values.busid = React.business.id

        let result = await React.request.post('/guest/GuestAdd', values)

        if(result.code == 0)
        {
            React.toast(result.msg, 'fail')
            return false
        }

        React.toast(result.msg, 'success')
        OnRefresh()
        addForm.resetFields()
    }

    // 获取住客详情
    const ToEditGuest = async (gid: number) => {
        SetGid(gid)
        let params = {
            busid: React.business.id,
            id: gid
        }

        let result = await React.request.post('/guest/GuestInfo', params)

        if(result.code == 0)
        {
            React.toast(result.msg, 'fail')
            return false
        }

        SetEditShow(true)

        editForm.setFieldsValue({
            mobile: result.data.mobile,
            nickname: result.data.nickname,
            gender: result.data.gender,
        })
    }

    // 编辑住客
    const EditGuest = async (values: any) => {
        SetEditShow(false)

        values.busid = React.business.id
        values.id = gid
 
        let result = await React.request.post('/guest/GuestEdit', values)

        if(result.code == 0)
        {
            React.toast(result.msg, 'fail')
            return false
        }

        React.toast(result.msg, 'success')
        OnRefresh()
    }

    // 删除住客
    const DeleteGuest = async (gid: number) => {
        React.UI.Dialog.confirm({
            title: '删除提醒',
            content: '是否确认删除住客信息',
            onConfirm: async () => {
                let params = {
                    busid: React.business.id,
                    id: gid
                }

                let result = await React.request.post('/guest/GuestDel', params)

                if(result.code == 0)
                {
                    React.toast(result.msg, 'fail')
                    return false
                }

                React.toast(result.msg, 'success', () => OnRefresh())
            }
        })
    }

    // 关闭添加弹层
    const CloseAddPopup = () => {
        SetAddShow(false)
        addForm.resetFields()
    }

    return (
        <>
            {/* 头部导航栏 */}
            <div className={styles.header}>
                <React.UI.NavBar 
                    back='返回'
                    right={
                        <React.ICON.SearchOutline fontSize={20} onClick={() => SetSearch(true)}/>
                    }
                    onBack={() => React.navigate(-1)}
                    style={{display: search ? 'none' : 'flex'}}
                >
                    住客信息
                </React.UI.NavBar>

                <div className={search ? styles.searchBarActive : styles.searchBar}>
                    <React.UI.SearchBar placeholder='请输入住户昵称' value={keyword} onChange={(val: any) => SetKeyword(val)} onSearch={() => OnRefresh()}/>
                    <React.UI.Button style={{height: '32px'}} size="small" onClick={ResetSearch}>取消</React.UI.Button>
                </div>
            </div>

            {/* 住客信息列表 */}
            <div className={styles.list}>
                <React.UI.PullToRefresh onRefresh={OnRefresh}>
                    <React.UI.List>
                        {list && list.map((item: any, key: number) => (
                            <React.UI.SwipeAction
                                key={key}
                                rightActions={RightBtn}
                                onAction={DeleteGuest.bind(this, item.id)}
                            >
                                <React.UI.List.Item
                                    key={key}
                                    description={item.mobile}
                                    arrowIcon={<React.ICON.EditSOutline fontSize={24} onClick={ToEditGuest.bind(this, item.id)}/>}
                                >
                                    {item.nickname}({item.gender_text})
                                </React.UI.List.Item>
                            </React.UI.SwipeAction>
                        ))}
                    </React.UI.List>

                    {/* 上拉加载 */}
                    <React.UI.InfiniteScroll loadMore={LoadMore} hasMore={hasMore} threshold={0}/>
                </React.UI.PullToRefresh>
            </div>

            {/* 添加按钮 */}
            <div className={styles.AddGuest} onClick={() => SetAddShow(true)}>添加住客</div>


            {/* 添加住客弹出层 */}
            <React.UI.Popup
                visible={addShow}
                bodyStyle={{height: '45vh', borderTopLeftRadius: '8px',borderTopRightRadius: '8px', paddingTop: '30px'}}
                closeOnMaskClick
                showCloseButton
                onClose={CloseAddPopup}
            >
                <React.UI.Form
                    form={addForm}
                    mode='card'
                    layout='horizontal'
                    onFinish={AddGuest}
                    footer={
                        <React.UI.Button block type="submit" color="primary" size="large">
                            提交
                        </React.UI.Button>
                    }
                >
                   {/* 昵称 */}
                    <React.UI.Form.Item name="nickname" label="昵称" rules={[{required: true}]}>
                        <React.UI.Input placeholder="请输入昵称" />
                    </React.UI.Form.Item>

                    {/* 手机号码 */}
                    <React.UI.Form.Item name="mobile" label="手机号码" rules={[{ required: true }, { pattern: /^1[3456789]\d{9}$/, message: '手机号格式不对' }]}>
                        <React.UI.Input placeholder='请输入手机号' />
                    </React.UI.Form.Item>

                    {/* 性别 */}
                    <React.UI.Form.Item name="gender" label="性别" rules={[{required: true}]}>
                        <React.UI.Radio.Group>
                            <React.UI.Space direction="horizontal">
                                <React.UI.Radio value='0'>女</React.UI.Radio>
                                <React.UI.Radio value='1'>男</React.UI.Radio>
                            </React.UI.Space>
                        </React.UI.Radio.Group>
                    </React.UI.Form.Item> 
                </React.UI.Form>
            </React.UI.Popup>

            {/* 编辑住客弹出层 */}
            <React.UI.Popup
                visible={editShow}
                bodyStyle={{height: '45vh', borderTopLeftRadius: '8px',borderTopRightRadius: '8px', paddingTop: '30px'}}
                closeOnMaskClick
                showCloseButton
                onClose={() => SetEditShow(false)}
            >
                <React.UI.Form
                    form={editForm}
                    mode='card'
                    layout='horizontal'
                    onFinish={EditGuest}
                    footer={
                        <React.UI.Button block type="submit" color="primary" size="large">
                            提交
                        </React.UI.Button>
                    }
                >
                   {/* 昵称 */}
                    <React.UI.Form.Item name="nickname" label="昵称" rules={[{required: true}]}>
                        <React.UI.Input placeholder="请输入昵称" />
                    </React.UI.Form.Item>

                    {/* 手机号码 */}
                    <React.UI.Form.Item name="mobile" label="手机号码" rules={[{ required: true }, { pattern: /^1[3456789]\d{9}$/, message: '手机号格式不对' }]}>
                        <React.UI.Input placeholder='请输入手机号' />
                    </React.UI.Form.Item>

                    {/* 性别 */}
                    <React.UI.Form.Item name="gender" label="性别" rules={[{required: true}]}>
                        <React.UI.Radio.Group>
                            <React.UI.Space direction="horizontal">
                                <React.UI.Radio value='0'>女</React.UI.Radio>
                                <React.UI.Radio value='1'>男</React.UI.Radio>
                            </React.UI.Space>
                        </React.UI.Radio.Group>
                    </React.UI.Form.Item> 
                </React.UI.Form>
            </React.UI.Popup>
        </>
    )
}